<template>
  <el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id">
      <el-breadcrumb-item>学科管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{
        tagsList[0].subjectName
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>目录管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头部搜索 -->

    <el-form
      :inline="true"
      ref="subjectForm"
      :model="queryList"
      label-width="80px"
      style="margin-top: 15px"
    >
      <el-form-item label="标签名称">
        <el-input v-model="queryList.tagName" class="inputCol"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryList.state" placeholder="请选择">
          <el-option label="已启用" :value="1"> </el-option>
          <el-option label="已禁用" :value="0"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" class="colInput" plain @click="clear"
          >清除</el-button
        >
        <el-button size="small" class="colInput" type="primary" @click="search"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item style="float: right">
        <el-button
          class="colright"
          size="mini"
          type="success"
          icon="el-icon-edit"
          @click="addTags"
          >新增学科</el-button
        >
        <el-button
          type="text"
          v-if="subjects.id"
          class="colright"
          icon="el-icon-back"
          @click="$router.back()"
          >返回学科</el-button
        >
      </el-form-item>
    </el-form>

    <el-alert
      :title="`数据一共 ${counts} 条`"
      :closable="false"
      type="info"
      show-icon
    >
    </el-alert>

    <!-- 表格 -->
    <el-table :data="tagsList" style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="subjectName" label="所属学科"></el-table-column>
      <el-table-column prop="tagName" label="标签名称"></el-table-column>
      <el-table-column prop="username" label="创建者"></el-table-column>
      <el-table-column prop="addDate" label="创建日期">
        <template v-slot="{ row }">
          <!-- 将时间进行格式化 -->
          {{ row.addDate | formatDate1 }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editState(scope.row)">{{
            scope.row.state === 1 ? "禁用" : "启用"
          }}</el-button>
          <el-button
            type="text"
            :disabled="scope.row.state === 1"
            @click="editTags(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            :disabled="scope.row.state === 1"
            @click="remove(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row style="text-align: right; margin-top: 20px; margin-bottom: 15px">
      <el-pagination
        :current-page="queryList.page"
        :page-size="queryList.pagesize"
        :page-sizes="[5, 10, 20, 50]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="counts"
      />
    </el-row>
    <tags-add ref="tagsAdd" :showDialog.sync="showDialog" @getTags="getTags" />
  </el-card>

  <!-- 新增 -->
</template>

<script>
import { getTags, removeTags, changeState } from "@/api/hmmm/tags";
import { formatDate } from "@/filters";
import tagsAdd from "../components/tags-add.vue";

export default {
  name: "Tags",

  // 注册过滤器
  filters: {
    formatDate1: formatDate,
  },
  components: {
    tagsAdd,
  },
  data() {
    return {
      queryList: {
        page: 1,
        pagesize: 10,
        tagName: "",
        state: null,
      },
      tagsList: [],
      counts: 0,
      showDialog: false,
    };
  },
  created() {
    this.getTags();
  },
  computed: {
    subjects() {
      return this.$route.query || null;
    },
  },
  watch: {
    "$route.query"() {
      this.getTags();
    },
  },
  methods: {
    // 点击新增按钮
    addTags() {
      this.showDialog = true;
    },
    // 点击修改
    editTags(id) {
      this.$refs.tagsAdd.detail(id);
      this.showDialog = true;
    },
    // 删除
    async remove(item) {
      const res = await this.$confirm(
        "此操作将永久删除该标签, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (res === "confirm") {
        await removeTags(item);
        this.$message.success("删除成功!");
        if (this.tagsList.length === 1) {
          this.queryList.page = this.queryList.page - 1;
        }
        this.getTags();
      }
    },
    // 修改状态
    async editState(row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1,
        });
        this.$message.success("操作成功");
        row.state = row.state === 1 ? 0 : 1;
      } catch (e) {
        this.$message.error("请求错误!");
      }
    },
    // 清除
    clear() {
      this.queryList.tagName = "";
      this.queryList.state = null;
      this.getTags();
    },
    // 搜索

    search() {
      this.getTags();
    },
    // 获取标签列表
    async getTags() {
      this.queryList.subjectID = this.subjects.id || null;
      const { data } = await getTags(this.queryList);
      this.tagsList = data.items;
      this.counts = data.counts;
    },
    handleSizeChange(val) {
      this.queryList.pagesize = val;
      this.queryList.page = 1;
      this.getTags();
    },
    handleCurrentChange(val) {
      this.queryList.page = val;
      this.getTags();
    },
  },
};
</script>

<style scoped lang="scss">
.left-fot {
  margin-left: 9px;
}

.el-row {
  margin-top: 20px;
}

.colInput {
  height: 35px;
}

.colright {
  float: right;
  height: 35px;
  margin-left: 10px;
}

.el-breadcrumb {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.inputCol {
  width: 200px;
}

.el-form-item {
  display: inline-block;
}

.el-table {
  margin-top: 10px;
}

.el-pagination {
  float: right;
  margin-top: 20px;
}

.elform {
  width: 100%;
}

.el-form-item__content {
  margin-left: 10px;
}
</style>
